<template>
  <div class="header">
    <el-header>
      <span class="title">Gremlin - 管理系统</span>
      <span>Hi, {{ name }} <i class="fa fa-sign-out" @click="logout"></i></span>
    </el-header>
  </div>
</template>

<script>
import { getToken, removeToken } from '@/utils/token'
export default {
  data () {
    return {
      name: ''
    }
  },
  created () {
    this.name = getToken('username')
  },
  methods: {
    // 退出登录功能
    logout () {
      this.$alert("确认要退出登录吗？", "提示", {
        confirmButtonClass: '确认',
        callback: () => {
          removeToken('username')
          this.$router.push('/login')
          this.$message({ message: '退出登录成功', type: 'success' })
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.header {
  .el-header {
    display: flex;
    width: 100%;
    font-weight: 700;
    font-size: 15px;
    line-height: 60px;
    color: white;
    justify-content: space-between;
    background-color: rgba(84, 92, 100);
    box-shadow: 0 5px 10px 0px rgba(113, 117, 120, 0.7);
    border-bottom: 1px solid rgb(67, 74, 80);
    padding: 0 40px;
    .title {
      width: 200px;
      font-size: 18px;
    }
    .fa-sign-out {
      color: #fff;
      font-size: 18px;
      margin-left: 10px;
      line-height: 60px;
      cursor: pointer;
    }
  }
}
</style>